<header class="navbar navbar-light navbar-static-top bd-navbar">
  <div class="container">
    <nav>
      <div class="clearfix">
        <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
          &#9776;
        </button>
        <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
					{{ site.title }}
        </a>
      </div>
      <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
        <ul class="nav navbar-nav">
          <li class="nav-item active">
						<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/">{{ site.title }}</a>
          </li>
          <li class="nav-item">
            <a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/components">Components</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>
